<template>
    <div id="report">
        <!-- <div class="main move-box">
            <div class="L" id="silder-left" style="min-width: 280px">
                <Tree ref="tree" :activeTab="activeTab" @handleTreeNodeData="handleTreeNodeData" />
                <div class="move-btn" v-move-crosswise></div>
            </div>
            <div class="R silder-right">
                <PrivatePlacement v-if="activeTab === 'private-placement'" :treeNodeData="treeNodeData" />
            </div>
        </div> -->

        <!-- 私募基金 -->
        <PrivatePlacement v-if="activeTab === 'private-placement'" :treeNodeData="treeNodeData" />
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import Tree from './report-manage/tree.vue';
import PrivatePlacement from './report-manage/private-placement.vue';
import { checkPermission } from '@/utils/tools';

@Component({ name: 'Report', components: { Tree, PrivatePlacement } })
export default class Report extends Vue {
    checkPermission = checkPermission;

    activeTab: string = 'private-placement';
    treeNodeData: any = {
        id: '1',
        label: '私募基金',
        level: 1,
    }; // 当前选中节点

    mounted() {}

    // @Watch('activeTab', { deep: true })
    // onWatchVisible(newData, oldData) {
    //     if (oldData && oldData === 'check') {
    //         const treeELE = this.$refs['tree'] as any;
    //         treeELE.getTreeData();
    //     }
    // }

    /**
     * 切换 树节点 回调
     */
    handleTreeNodeData(data: any): void {
        this.treeNodeData = data;
    }

    /**
     * tab切换 事件
     */
    handleTabClick({ name }): void {
        console.log(name, 'tab切换');
    }
}
</script>
<style lang="scss" scoped>
@import '@/project/cmschina/style/cmschina.scss';
#report {
    height: 100%;
    overflow: hidden;
    min-width: 1250px;
}

// /deep/ .el-tabs {
//     // height: 100%;
//     .el-tabs__content {
//         // padding: 20px;
//         // height: calc(100% - 35px);
//         overflow: auto;
//         .el-tab-pane {
//             // color: #333;
//             // height: 100%;
//             overflow: auto;
//         }
//     }
// }

// /deep/ .el-tabs .el-tabs__nav .is-active:hover,
// /deep/ .el-tabs__item.is-active {
//     // color: #ba926f;
//     font-weight: 700;
// }

// /deep/ .el-tabs > .el-tabs__header .el-tabs__item {
//     // border: 1px solid #e4e7ed;
//     // border-bottom: none;
//     padding: 0 14px;
//     border-top-left-radius: 3px;
//     border-top-right-radius: 3px;
//     &:nth-child(2) {
//         padding-left: 14px;
//     }
//     &:last-child {
//         padding-right: 14px;
//     }
// }

// /deep/ .el-tabs__nav-wrap::after {
//     height: 2px;
//     background-color: var(--border-color);
// }

// /deep/ .el-tabs__active-bar {
//     background-color: #f39500 !important;
// }

// /deep/ .el-tabs .el-tabs__nav .is-active {
//     border: none;
// }

// /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
//     background-color: transparent;
// }

// /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
//     border-right: 0px solid #fff;
// }

// /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
//     height: 39px;
//     line-height: 39px;
// }

/deep/ .el-input--mini .el-input__inner {
    font-size: 12px;
}
</style>
